/* 标记容器包装器 - 占满整个父元素 */
.markers-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
}

/* 内部容器 - 模拟背景图cover效果的容器 */
.markers-container {
  position: absolute;
  pointer-events: none;
}

/* 柱子包装 */
.bar-marker-wrapper {
  position: absolute;
  pointer-events: none;
}

/* 标记区域基础样式 */
.bar-marker {
  position: absolute;
  pointer-events: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* 根据id控制不同柱子的背景图片 */
.bar1 {
  background-image: url('../../../../../public/images/柱子1.png');
  border: none;
  background-color: transparent;
}

.bar2 {
  background-image: url('../../../../../public/images/柱子2.png');
  border: none;
  background-color: transparent;
}

.bar3 {
  background-image: url('../../../../../public/images/柱子3.png');
  border: none;
  background-color: transparent;
}

.bar4 {
  background-image: url('../../../../../public/images/柱子4.png');
  border: none;
  background-color: transparent;
}

.bar5 {
  background-image: url('../../../../../public/images/柱子5.png');
  border: none;
  background-color: transparent;
} 